<template>
	<view class="content" style="background-color: #fff;">
		<u-navbar scrollable=false titleStyle="font-size:40rpx;color:#333" :placeholder='true' title="选择商品"
			:autoBack="true">
		</u-navbar>
		<u-tabs itemStyle="width:19%;padding-bottom:20rpx;" :list="list1" @click="click">

		</u-tabs>
		<!-- <List :showTopTitle="false"/> -->
		<view class="cards">
			<!-- 0店铺商品1购物车2收藏夹3浏览记录 -->
			<view class="" v-if="state==0">
				<view class="lis" v-for="(item,index) in 5" @longpress.stop.prevent='log' :key="index"
					style="float: left;">
					<u-image src="https://cdn.uviewui.com/uview/album/1.jpg" :lazy-load="true" width="100%"
						mode="widthFix">
					</u-image>
					<view class="bottomBox">
						<view class="goodsname fontS28 elipes2">SNIFF JAPAN S925纯银Access纯银Access纯银Accessories</view>
						<!-- <view class="wantbuynum fontS24">
							999人想买
						</view> -->
						<view class="flexJBC" style="align-items: flex-end;">
							<view class="unitPrice">
								<view>
									<text>￥</text>
									<text>200</text>
								</view>
								<!-- <view class="flex">
									<text class="gongyingsdhang">认证供应商</text>
								</view> -->
							</view>
							<view class="send" v-if="long==0">
								发送
							</view>

							<view class="long_checked" v-if="long==1">
								<u-radio-group v-model="radiolist1" @change="groupChange" iconPlacement="right">
									<u-radio activeColor="red" @change="radioChange"></u-radio>
								</u-radio-group>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="" v-if="state==1">
				<view class="lis" v-for="(item,index) in 5" @longpress.stop.prevent='log' :key="index"
					style="float: left;">
					<u-image src="https://cdn.uviewui.com/uview/album/1.jpg" :lazy-load="true" width="100%"
						mode="widthFix">
					</u-image>
					<view class="bottomBox">
						<view class="goodsname fontS28 elipes2">SNIFF JAPAN S925纯银Access纯银Access纯银Accessories</view>
						<!-- <view class="wantbuynum fontS24">
						999人想买
					</view> -->
						<view class="flexJBC" style="align-items: flex-end;">
							<view class="unitPrice">
								<view>
									<text>￥</text>
									<text>200</text>
								</view>
								<!-- <view class="flex">
								<text class="gongyingsdhang">认证供应商</text>
							</view> -->
							</view>
							<view class="send" v-if="long==0">
								发送
							</view>

							<view class="long_checked" v-if="long==1">
								<u-radio-group v-model="radiolist1" @change="groupChange" iconPlacement="right">
									<u-radio activeColor="red" @change="radioChange"></u-radio>
								</u-radio-group>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="" v-if="state==2">
				<view class="lis" v-for="(item,index) in 5" @longpress.stop.prevent='log' :key="index"
					style="float: left;">
					<u-image src="https://cdn.uviewui.com/uview/album/1.jpg" :lazy-load="true" width="100%"
						mode="widthFix">
					</u-image>
					<view class="bottomBox">
						<view class="goodsname fontS28 elipes2">SNIFF JAPAN S925纯银Access纯银Access纯银Accessories</view>
						<!-- <view class="wantbuynum fontS24">
								999人想买
							</view> -->
						<view class="flexJBC" style="align-items: flex-end;">
							<view class="unitPrice">
								<view>
									<text>￥</text>
									<text>200</text>
								</view>
								<!-- <view class="flex">
										<text class="gongyingsdhang">认证供应商</text>
									</view> -->
							</view>
							<view class="send" v-if="long==0">
								发送
							</view>

							<view class="long_checked" v-if="long==1">
								<u-radio-group v-model="radiolist1" @change="groupChange" iconPlacement="right">
									<u-radio activeColor="red" @change="radioChange"></u-radio>
								</u-radio-group>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="" v-if="state==3">
				<view class="lis" v-for="(item,index) in 5" @longpress.stop.prevent='log' :key="index"
					style="float: left;">
					<u-image src="https://cdn.uviewui.com/uview/album/1.jpg" :lazy-load="true" width="100%"
						mode="widthFix">
					</u-image>
					<view class="bottomBox">
						<view class="goodsname fontS28 elipes2">SNIFF JAPAN S925纯银Access纯银Access纯银Accessories</view>
						<!-- <view class="wantbuynum fontS24">
										999人想买
									</view> -->
						<view class="flexJBC" style="align-items: flex-end;">
							<view class="unitPrice">
								<view>
									<text>￥</text>
									<text>200</text>
								</view>
								<!-- <view class="flex">
												<text class="gongyingsdhang">认证供应商</text>
											</view> -->
							</view>
							<view class="send" v-if="long==0">
								发送
							</view>

							<view class="long_checked" v-if="long==1">
								<u-radio-group v-model="radiolist1" @change="groupChange" iconPlacement="right">
									<u-radio activeColor="red" @change="radioChange"></u-radio>
								</u-radio-group>
							</view>
						</view>
					</view>
				</view>

			</view>


		</view>



		<view class="bottom" v-if="long==1">

			<view class="checked fontS28 co3">
				已选择<text class="homeRed" style="margin: 0 10rpx;">2</text>件商品
			</view>
			<view class="btn">
				<button>发送</button>
			</view>
		</view>
	</view>
</template>



<script>
	// import List from '@/componentes/list.vue'
	export default {
		data() {
			return {
				long: '0', //长按显示0发送
				state: '0', //0店铺商品1购物车2收藏夹3浏览记录
				list1: [{
					name: '店铺商品',
				}, {
					name: '购物车',
				}, {
					name: '收藏夹'
				}, {
					name: '浏览记录'
				}],
				radiolist1: [{
					name: '',
					disabled: false
				}],
				radiovalue1: '',
			}
		},
		components: {
			// List
		},
		methods: {
			click(item) {
				console.log('item', item);
				this.state = item.index
			},
			log() {
				console.log(123);
			},
			groupChange() {
				console.log('groupChange');
			},
			radioChange() {
				console.log('radioChange');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		border: 2rpx solid #f5f5f5;

		.cards {
			padding: 0 4%;
			padding-top: 20rpx;
			background-color: #f5f5f5;

			.lis {
				width: 48%;
				border-radius: 20rpx;
				overflow: hidden;
				// margin-top: 20rpx;
				margin-bottom: 20rpx;

				&:nth-child(2n-1) {
					margin-right: 4%;
				}
			}


			.bottomBox {
				background: #fff;
				padding: 20rpx 16rpx;
				box-sizing: border-box;
				border-radius: 0 0 20rpx 20rpx;

				.goodsname {
					color: #000;
					line-height: 39rpx;
				}



				.gongyingsdhang {
					color: #C9A45B !important;
					font-size: 20rpx !important;
					margin-top: 10rpx;
				}

				.send {
					width: 84rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 20rpx;
					font-size: 20rpx;
					background-color: #ffe2e5;
					text-align: center;
					color: $red;
				}
			}
		}

		.bottom {
			background-color: white;
			position: absolute;
			left: 0;
			bottom: 0;
			box-sizing: border-box;
			width: 100%;
			padding: 0 4%;

			.checked {
				height: 80rpx;
				line-height: 80rpx;
			}

			.btn {
				height: 112rpx;

				button {
					height: 80rpx;
					color: white;
					border-radius: 40rpx;
					background-color: $red;
				}
			}
		}
	}
</style>
